<!-- 文章管理 -->
<template>
    <div class="account-list">
        <header>
            <!-- 名称查询 -->
            <div class="search">
                <el-form :inline="true" :model="searchData" class="demo-form-inline">
                    <el-form-item label="类型">
                        <el-select v-model="searchData.a_type" placeholder="请选择类型">
                            <el-option label="公司简介" value="1"></el-option>
                            <el-option label="新闻中心" value="2"></el-option>
                            <el-option label="使用帮助" value="3"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="标题">
                        <el-input v-model="searchData.a_title" placeholder="请输入标题"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="search" size="medium">查询</el-button>
                    </el-form-item>
                    <el-button type="primary" icon="el-icon-circle-plus-outline" @click="add" size="medium">添加文章</el-button>
                </el-form>
                
            </div>
            
        </header>
        <!-- 列表 -->
        <div class="list">
            <div class="list-opate">
                <el-table :data="list" style="width: 100%" tooltip-effect="dark">
                    <el-table-column align='center' :formatter="typeF" prop="a_type" label="类型" width="120"></el-table-column>
                    <el-table-column align='center' prop="a_title" label="标题" width="150"></el-table-column>
                    <el-table-column align='center' prop="a_content" label="内容" show-overflow-tooltip></el-table-column>
                    <el-table-column align='center' prop="a_phone" label="电话" width="120"></el-table-column>
                    <el-table-column align='center' :formatter="statusF" prop="a_status" label="状态" width="120"></el-table-column>
                    <el-table-column align='center' prop="a_create_time" label="创建时间" width="140"></el-table-column>
                    <el-table-column align='center' prop="a_update_time" label="修改时间" width="140"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="130" align='center'>
                        <template slot-scope="scope">
                            <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
                            <el-button @click="updatestatus(scope.row)" type="text" size="small">{{scope.row.a_status == 1?'禁用':'启用'}}</el-button>
                            <el-button @click="del(scope.row)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 修改信息 添加账号 -->
        <el-dialog :title="dialogtitle" :visible.sync="dialogFormVisible" width="65%" center>
            <el-form label-width="130px" :model="form" :rules="rules" ref="form">
                <el-form-item label="标题" prop="a_title">
                    <el-input v-model="form.a_title" placeholder="请输入标题"></el-input>
                </el-form-item>
                <el-form-item label="类型" prop="a_type">
                    <el-select v-model="form.a_type" placeholder="请选择类型">
                        <el-option label="公司简介" value="1"></el-option>
                        <el-option label="新闻中心" value="2"></el-option>
                        <el-option label="使用帮助" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="客服电话" prop="a_phone" v-show="form.a_type == 1">
                    <el-input type="number" v-model="form.a_phone" placeholder="请输入客服电话"></el-input>
                </el-form-item>
                <el-form-item label="内容" prop="a_content">
                    <!-- <el-input type="textarea" v-model="form.a_content" placeholder="请输入文章内容"></el-input> -->
                    <quill-editor 
                    v-model="form.a_content" 
                    ref="myQuillEditor" 
                    :options="editorOption" 
                    @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                    @change="onEditorChange($event)">
                    </quill-editor>

                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel('form')">取 消</el-button>
                <el-button type="primary" @click="submitForm('form')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script src='../../contral/articlelist.js'></script>
<style>

    .ql-toolbar.ql-snow{border-color:#dcdfe6;}
    .ql-container{height:200px !important;border-color:#dcdfe6;}
    .ql-snow .ql-picker-label::before {position: relative;top: -10px;}
    .ql-snow .ql-color-picker .ql-picker-label svg, .ql-snow .ql-icon-picker .ql-picker-label svg{position: relative;top:-6px;}

</style>

